import React, { PureComponent } from 'react';
import { Modal, Form, Input, TreeSelect } from 'antd';
import { dataTree } from '../../../../utils/dataConversion';

const { TextArea } = Input;
const FormItem = Form.Item
const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
}
class roleModal extends PureComponent {

    componentDidUpdate() {
        const { treeData, getMenuTree } = this.props
        if (treeData.length === 0) {
            getMenuTree()
        }
    }

    handleOk = () => {
        const { modal = {}, handleOk, form } = this.props
        const { validateFields, getFieldsValue } = form
        validateFields(errors => {
            if (errors) {
                return
            }
            const data = {
                res: {
                    id: modal.id || new Date().getTime(),
                    name: modal.name,
                    ...getFieldsValue(),
                    createTime: modal.createTime || new Date().getTime()
                },
                fun: Object.keys(modal).length > 0 ? 'upDate' : 'add'
            }
            console.log('表单', data)
            handleOk(data)
        })
    };

    render() {
        const { visible, treeData, confirmLoading, modal, showModal, form} = this.props;
        const { getFieldDecorator } = form
        let newTreeData = dataTree(treeData)
        return (
            <div>
                <Modal
                    title={Object.keys(modal).length > 0 ? '修改' : '新增'}
                    visible={visible}
                    onOk={this.handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={showModal}
                >
                    <Form layout="horizontal">
                        <FormItem label='名称' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('name', {
                                initialValue: modal.name,
                                rules: [
                                    {
                                        required: true,
                                    }
                                ],
                            })(<Input />)}
                        </FormItem>
                        <FormItem label='菜单' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('menu', {
                                initialValue: modal.menu,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<TreeSelect
                                style={{ width: '100%' }}
                                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                treeData={newTreeData}
                                multiple = {true}
                                placeholder="请选择"
                              />)}
                        </FormItem>
                        <FormItem label='备注' hasFeedback {...formItemLayout}>
                            {getFieldDecorator('remarks', {
                                initialValue: modal.remarks,
                                rules: [
                                    {
                                        required: true,
                                    },
                                ],
                            })(<TextArea rows={4} />)}
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        );
    }
}

roleModal = Form.create({
    mapPropsToFields(props) {
        const { modal } = props;
        const { createFormField } = Form
        return {
            name: createFormField(modal.name),
            menu: createFormField(modal.menu),
            remarks: createFormField(modal.remarks)
        };
    }
})(roleModal);

export default roleModal